<template>
  <div class="model">
    <div class="model-mask"></div>
    <div class="model-pop">
      <div class="close" @click="handleClose"></div>
      <div class="model-form model-phone">
        <p class="showqrcode">
          <img :src="imgpath" width="200"/>
        </p>
        <h3 class="title">请在{{time}}s内微信扫码支付</h3>
      </div>
    </div>
  </div>
</template>
<script>
import {
  Modal
} from "ant-design-vue";
import { mapState, mapMutations } from "vuex";
import mTypes from "@/store/mutationsTypes";
import {
  checkOrder
} from "@/services"
export default {
  computed: {
    ...mapState({
      userInfo: state => state.userInfo
    })
  },
  data() {
    return {
      time:150,
      imgpath:'',
      timer:'',
      order_no:'',
      msg:''
    };
  },
  mounted () {

  },
  created(){
    this.imgpath = this.$attrs.imgpath;
    this.order_no = this.$attrs.order_no;
    this.validateBtn();
  },
  methods: {
    validateBtn() {
      //倒计时
      timer = setInterval(() => {
        if (this.time == 0) {
          this.msg = '订单超时';
          this.handleClose();
          return false;
        } else {
          this.checkorder();
          this.time--;
        }
      }, 1000);
    },
    //查询订单
    checkorder(){
      checkOrder({
        order_no:this.order_no
      }).then((res)=>{
        if (res.code === 1) {
          if(res.data.status == 1){
             this.msg = '支付成功';
             this.handleClose()
            return false;
          }
        }else{
          this.msg = '订单失败';
           this.handleClose()
          return false;
        }
      });
    },
    handleClose() {
      clearInterval(this.timer);
      this.$emit("model", false);
    }
  }
};
</script>
<style lang="less" scoped>
.model {
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  width: 2800px;
  height: 100%;
  min-width: 1200px;
  z-index: 120;
  &-mask {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    min-width: 1200px;
    background: rgba(0, 0, 0, 0.5);
  }
  &-pop {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 340px;
    min-height: 316px;
    background: #fff;
    border-radius: 10px;
    .close {
      position: absolute;
      right: 39px;
      top: 33px;
      width: 16px;
      height: 16px;
      background: url("../../assets/home/close.png") no-repeat;
      background-size: 16px 16px;
      cursor: pointer;
    }
    .btn {
      width: 360px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #ffffff;
      background: linear-gradient(180deg, #13c998 0%, #27bfa3 100%);
      box-shadow: 0px 3px 6px rgba(23, 178, 145, 0.4);
      border-radius: 25px;
      margin: 12px auto 0;
      cursor: pointer;
    }
    .label-prefix {
      width: 84px;
    }
  }
  &-form {
    padding: 30px 40px 0 40px;
    .title {
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #27bfa3;
      margin-bottom: 40px;
    }
  }
  .label-prefix {
    width: 120px;
  }
  .model-phone{
    text-align: center;
    margin: 0 auto;
  }
}
</style>
